<template>
  <div id="appContainer"></div>
</template>

<script setup>
import { onMounted, onBeforeUnmount, ref, watchEffect, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { loadMicroApp, start, initGlobalState } from 'qiankun'
const app = ref()
const router = useRouter()

const state = reactive({
  time: 0
})

onMounted(() => {
  app.value = loadMicroApp({
    name: "vitesub1",
    entry: "http://127.0.0.1:3000",
    container: "#appContainer",
    props: {
      router,
      brand: "传递数据",
    },
  })
  start({
    sandbox: {
      experimentalStyleIsolation: true, // 实验性的样式隔离特性
      // strictStyleIsolation: true  //严格的样式隔离模式  3.0 中要被遗弃
    },
  })
  const actions = initGlobalState(state);
  actions.onGlobalStateChange((state, prev)=> {
    console.log(state, prev);
  }, true)
  // app.value.mount(()=> {
  //   console.log("加载完毕了");
  // })
  // setInterval(() => {
  //   state.time += 1
  // }, 1000);
})

watchEffect(() => state.time, (val, oldVal) => {
  console.log(val);
  console.log(oldVal);
})

onBeforeUnmount(() => {
  app.value.unmount()
})


</script>

<style scoped></style>